<template>
    <div class="mainClass">
        <div style="height:50px;text-align:center;">
            <div style="font-size: 20px;padding-top: 10px;display: block;float: left;font-weight: bold;">
                
            </div>
        </div>
        <form style="margin:20px 10px 0px 10px; display: flex;flex-direction: column;">
            <div style="text-align: center;margin-bottom: 30px;">
                <img style="width:110px;" src="../../../../../static/img/login-logo.png" alt="" />
            </div>
            <input type="text" class="inputClass" v-model="username" placeholder="用户名" autofocus>
            <input type="password" class="inputClass" v-model="password" placeholder="密码">
            <a class="inputClass aClass" href="javascript:;" @click="login">
                <div class="percent" :style="percentStyle">
                    <span class="submitCheckOut" :style="submitCheckOutStyle" v-html="submitCheckOut"></span>
                </div>
            </a>
        </form>
    </div>
</template>
<script>
import C from '#/src/common/common.js'
import config from '#/package.json'
import { ipcRenderer, remote } from 'electron'

export default {
    name: 'index',
    data () {
        return {
            username: '',
            password: '',
            version: '',
            submitCheckOut: '准备检查更新！',
            submitCheckOutStyle: {

            },
            percentStyle: {
                width: '0%'
            },
            canSubmit: false
        }
    },
    methods: {
        async login () {
            if (!this.canSubmit) return false
            if ('' == this.username) {
                C.error('请填写用户名')
                return false
            }
            if ('' == this.password) {
                C.error('请填写密码')
                return false
            }
            const machine = require('node-machine-id')
            let machineid = machine.machineIdSync()
            this.canSubmit = false
            this.submitCheckOut = '<i class="el-icon-loading"></i>'
            let res = await C.ajax('/login/public/newsignin', { username: this.username, password: this.password, machineid: machineid }, 'post')
            this.submitCheckOut = '确  定'
            this.canSubmit = true
            // 存储token
            if (res) {
                C.setLocalStorage('usertoken', res.data.token)
                C.setLocalStorage('permission', res.data.permi.gradepermission)
                if (1 == res.data.floor) {
                    C.openBrowserWindow('/', {}, {
                        transparent: true,
                        frame: false,
                        // openDevTools: true,
                        width: 1600,
                        height: 900,
                        useSpa: true,
                        spaModel: 'shop'
                    })
                } else {
                    // C.openBrowserWindow('html/organization/index.html', {}, {width: 1600, height: 900})
                    C.openBrowserWindow('/', {}, {
                        transparent: true,
                        frame: false,
                        // openDevTools: true,
                        width: 1600,
                        height: 900,
                        useSpa: true,
                        spaModel: 'organization'
                    })
                }
                C.closewin()
            }
        },
        close () {
            C.closeBrowserWindow()
        },
        async checkUpdatesMessage () {
            // 接收更新消息
            ipcRenderer.on('_checkUpdatesMessage', (e, arg) => {
                this.submitCheckOut = arg.msg
                this.percentStyle.width = arg.percent
                if (arg.success) {
                    this.submitCheckOut = '确  定'
                    this.submitCheckOutStyle = {
                        color: '#fff',
                        fontSize: '30px',
                        fontWeight: '900'
                    }
                    this.canSubmit = true
                    if (arg.isreStart) {
                        alert('更新完毕，点击确定重启应用！')
                        remote.app.relaunch()
                        remote.app.exit(0)
                    }
                }
            })
        },
        onkeyUp () {
            window.onkeyup = e => {
                if (e.which == 13) this.login()
            }
        }
    },
    mounted: function () {
        this.version = config.smallVersion
        localStorage.clear()

        // 放入队列最后执行
        setTimeout(function () {
            ipcRenderer.send('_checkUpdates')
        })
        this.checkUpdatesMessage()

        // 发送主窗口（--兼容图标）
        // ipcRenderer.send('_changeMainWindow', remote.getCurrentWindow().id)

        this.onkeyUp()
    }
}
</script>
<style>
.mainClass {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.inputClass {
  height: 30px;
  border: none;
  border-radius: 3px;
  padding: 5px 15px;
  margin-bottom: 25px;
  outline: none;
}
.aClass {
  border: none;
  background: rgb(234, 234, 236);
  padding: 0px;
  position: relative;
  text-decoration: none;
  height: 40px;
  text-align: center;
}
*:focus {
  outline: none !important;
}
a :hover {
  color: #000;
}
.submitCheckOut {
  width: 343px;
  display: block;
  font-size: 12px;
  line-height: 39px;
  color: rgb(228, 4, 118);
}
.submitCheckOut :hover {
  color: #fff;
}
.percent {
  background: #4fd4a2;
  border-radius: 3px;
  width: 0%;
  position: absolute;
  height: 40px;
}
</style>